<style scoped>
.roleManagement {
  padding: 10px;
}
</style>

<template>

  <div class="roleManagement">
 <div style="background-color:#B0E0E6;padding:10px 0 0;border-radius:4px;position:relative;">
    <Row>
    <Button  class="top-right-btn" size="large" icon="plus" v-has="'add'" @click="addRole">添加</Button>
    <Button class="top-right-btn" type="primary" size="large" icon="ios-search" @click="doSearchTableList">搜 索</Button>
    </Row>
    </div>
    <!--table-->
    <Row>
      <Col :xs="24" :sm="24" :md="18" :lg="12">
      <Row>
        <Table stripe size="small" :columns="tableColums" :data="tableData"></Table>
      </Row>

      </Col>

    </Row>
    <!--新增编辑-->
    <roleForm :modalShow="formShow" :modalFormTitle="formTitle" :parentForm="parentForm" @listenModalForm="hideModel" @refreshTableList="getTableList"></roleForm>
    <!--新增编辑-->
    <roleTree :treeShow="treeShow" :roleId="setTreeRoleId" @listenModalTree="hideTree"></roleTree>
    <!--是否删除框-->
    <Modal v-model="delModal" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="information-circled"></Icon>
        <span>删除确认</span>
      </p>
      <div style="text-align:center">
        <p>是否继续删除？</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long :loading="btnLoading" @click="comfirmDel">删除</Button>
      </div>
    </Modal>
  </div>

</template>

<script>
import { rolePagedList, delRole } from "./../../../api/getData";
import { clearObj } from "./../../../libs/util";
import roleForm from "./roleForm.vue";
import roleTree from "./roleTree.vue";
export default {
  name: "roleManagement",
  components: {
    roleForm,
    roleTree
  },
  data() {
    return {
      tableColums: [
        {
          type: "index",
          width: 60,
          title: "序号",
          align: "center"
        },
        {
          align: "center",
          title: "角色名称",
          key: "roleName"
        },
        {
          align: "center",
          title: "人员类型",
          key: "roleNum",
          render: (h, params) => {
            let roleType = "";
            if(params.row.roleNum=="1"){
              roleType="管理员";
            }else if(params.row.roleNum=="2"){
              roleType="维保人员";
            }else if(params.row.roleNum=="3"){
                 roleType="政府机构人员";
            }else if(params.row.roleNum=="4"){
               roleType="普通用户";
            }else if(params.row.roleNum=="5"){
               roleType="网格员";
            }
            return h("span", roleType);
          }
        },
        {
          title: "操作",
          width:250,
          align: "center",
          render: (h, params) => {
            let actions = [];

            actions.push(
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.setRoleTree(params.row.id);
                    }
                  }
                },
                "设置权限"
              )
            );

            actions.push(
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.editRole(params.row);
                    }
                  }
                },
                "修改"
              )
            );

            actions.push(
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.dodelRole(params.row.id);
                    }
                  }
                },
                "删除"
              )
            );

            return h("div", actions);
          }
        }
      ],
      tableData: [
        {
          RoleName: "客户属性",
          RoleNo: ""
        }
      ],
      formShow: false,
      formTitle: "添加角色",
      parentForm: {
        Id: "",
        roleName: "",
        roleNum: ""
      },
      delModal: false,
      delId: "", //删除的Id
      btnLoading: false,
      treeShow: false,
      setTreeRoleId: 0,//配置角色权限的roleId
      searchForm: {
        roleName: "",
        rows: 10,
        page: 0
      }
    };
  },
  created() {},
  mounted() {
    this.getTableList();
  },
  methods: {
    async getTableList() {
      const params = { page: 0, rows: 10 };
      const result = await rolePagedList(params);
      if (result.code == 0) {
        //console.log(result);
        this.tableData = result.data;
      } else {
        Message.error(res.msg);
      }
    },
    addRole() {
      clearObj(this.parentForm);
      this.formTitle = "添加角色";
      this.formShow = true;
    },
    editRole(row) {
      this.parentForm = Object.assign(row);
      this.formTitle = "修改角色";
      this.formShow = true;
    },
    dodelRole(Id) {
      this.delId = Id;
      this.delModal = true;
    },
    doSearchTableList() {
      //this.currentPage = 1;
      this.getTableList();
    },
    async comfirmDel() {
      this.btnLoading = true;
      try {
        const res = await delRole({ id: this.delId });
        if (res.code==0) {
          this.$Message.success("删除成功!");
          this.getTableList();
          this.delModal = false;
        } else {
          this.$Message.error(res.msg);
        }
      } catch (err) {
        console.log(err);
        this.$Message.error("服务器异常，稍后再试");
      }
      this.btnLoading = false;
    },
    hideModel() {
      this.formShow = false;
    },
    setRoleTree(id) {
      this.setTreeRoleId = parseInt(id);
      this.treeShow = true;
    },
    hideTree() {
      this.treeShow = false;
    }
  }
};
</script>
